<template>

  <router-view/>
</template>

<script setup>
import axios from 'axios';
import { provide } from 'vue';
import { useRouter } from 'vue-router';
	axios.defaults.baseURL='http://localhost:9000/';

	// 请求拦截器和响应拦截器的全局设置
	//请求拦截器
    axios.interceptors.request.use(function(config) {
        console.log('在发送请求之前做些什么');
		// 利用前端Session获得令牌信息
		let token=sessionStorage.getItem('token');
        console.log(token);
		// 把令牌加入请求的头部报文中
		// 给请求对象的头部报文中增加一个键，该键名为token
		// null等价于false
		// !=null 等价于true
		// if(token!=null)可以简写为if(token)
		if(token){
			config.headers['token']=token;
		}

		return config;
    }, function(error) {
        console.log('对请求错误做些什么');
        return Promise.reject(error);
    });
	
	const router=useRouter();
    //响应拦截器
    axios.interceptors.response.use(function(response) {
        console.log('在响应之前做些什么');
		console.log(response.data);
		if(response.data==='invalid token'){
			router.push('/pageError');
		}
        return response;
    }, function(error) {
        console.log('对响应错误做点什么');
        return Promise.reject(error);
    });
	
	// 实现axios对象的全局注入
	provide('axios',axios);
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  border: 2px solid green;
  
}

body{
	height: 100%;
	width: 100%;
	margin: 0;
}

html{
	height: 100%;
	width: 100%;
}

</style>
